<template>
  <!-- 担保物管理 -->
  <div class="guaranteeA">
    <div class="neirong" v-if="flag">
      <!-- 顶部担保物管理 -->
      <div class="hander">
        <!-- <el-button size="large" type="primary" round>担保物管理</el-button> -->
      </div>

      <!-- 底部内容区域 -->
      <div class="footer">
        <!-- 底部内容区域上方输入框 -->
        <div class="top">
          <!-- 输入框 -->
          <div class="topIndex">
            <el-input
              v-model="input4"
              class="w-50 m-2"
              placeholder="请输入要查询的担保物名称"
              size="large"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </div>
          <!-- 下拉菜单 -->
          <div class="menu">
            <el-select
              v-model="value"
              class="m-2"
              placeholder="类别"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="btns">
            <div class="left">
              <el-button type="primary" class="button1">查询</el-button>
              <el-button type="primary" plain class="button">重制</el-button>
            </div>
            <div class="right">
              <el-button type="primary" plain class="button3" @click="flag1"
                >新增</el-button
              >
            </div>
          </div>
        </div>

        <!-- 底部内容区域中间内容 -->
        <div class="main">
          <el-table class="table" :data="bannerList" stripe style="width: 100%">
            <el-table-column prop="date" label="序号">
              <template #default="scope">
                <span> {{ scope.$index + 1 }} </span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="担保物编号">
              <template #default="{ row }">
                <span>{{ row.dbwCollateralid }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="担保物名称">
              <template #default="{ row }">
                <span>{{ row.dbwCollateralname }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="担保物类别">
              <template #default="{ row }">
                <span>{{ row.dbwCollateraltype }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="审批状态">
              <template #default="{ row }">
                <span>{{ row.lading }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="更新时间">
              <template #default="{ row }">
                <span>{{ row.dbwUpdatetime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
              <el-icon color="rgba(78, 171, 254, 1)">
                <View />
              </el-icon>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-icon color="rgba(78, 171, 254, 1)">
                <Position />
              </el-icon>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-icon
                color="rgba(78, 171, 254, 1)"
                @click="delect(scope.row.id)"
                ><Delete
              /></el-icon>
            </el-table-column>
          </el-table>
        </div>

        <!-- 底部内容区域尾部页码 -->
        <div class="bottom">
          <el-pagination
            :page-sizes="[2, 4, 6, 8]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 点击新增增加的表格 -->
    <div class="tables" v-else>
      <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
          <td>Row 1, Column 4</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
          <td>Row 2, Column 4</td>
        </tr>
        <tr>
          <td>Row 3, Column 1</td>
          <td>Row 3, Column 2</td>
          <td>Row 3, Column 3</td>
          <td>Row 3, Column 4</td>
        </tr>
        <tr>
          <td>Row 4, Column 1</td>
          <td>Row 4, Column 2</td>
          <td>Row 4, Column 3</td>
          <td>Row 4, Column 4</td>
        </tr>
      </tbody>
    </table>

    <!-- 文件上传控件 -->
    <label for="file-upload" class="upload-button">Upload File</label>
    <input type="file" id="file-upload">
    </div>
  </div>
</template>

<script setup>
import service from "@/apis";

import { onMounted, ref } from "vue";

// 请求表格数据
var bannerList = ref([]);

onMounted(async () => {
  var res = await service.tables.add_dbwCollate();
  if (res.data.data) {
    res.data.data.forEach((item) => {
      item.lading = false;
    });
    bannerList.value = res.data.data;
  }
  console.log(res.data.data);
});


// 担保物信息删除
var delect = async (id) => {
  var res = await service.banner.banner_delete({ id });
  if (res.data.code == 200) {
    var i = bannerList.value.findIndex((item) => item.id == id);
    if (i != -1) {
      bannerList.value.splice(i, 1);
    }
  }
};
// var res =  await service.tables.dbwCollateral(form.value)

const value = ref("");

const options = [
  {
    value: "全部",
    label: "全部",
  },
  {
    value: "保证金",
    label: "保证金",
  },
  {
    value: "车辆",
    label: "车辆",
  },
  {
    value: "法人担保",
    label: "法人担保",
  },
  {
    value: "设备",
    label: "设备",
  },
  {
    value: "房产",
    label: "房产",
  },
  {
    value: "存货",
    label: "存货",
  },
  {
    value: "土地",
    label: "土地",
  },
  {
    value: "自然人担保",
    label: "自然人担保",
  },
  {
    value: "存单",
    label: "存单",
  },
  {
    value: "应收账款",
    label: "应收账款",
  },
  {
    value: "商票",
    label: "商票",
  },
  {
    value: "仓单",
    label: "仓单",
  },
  {
    value: "其他",
    label: "其他",
  },
];

// 新增按钮，点击消失，出现表格
var flag = ref(true);
var flag1 = () => {
  flag.value = false;
};

//表格
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.footer {
  width: 1300px;
  height: 620px;
  background-color: #fafafa;
}
.topInput {
  width: 240px;
}
.top {
  padding: 20px 0;
  margin: 0 24px;
  display: flex;
}
.footer .top .menu {
  width: 120px;
  padding: 0 20px;
}
.footer .top .btns button {
  width: 80px;
  height: 38px;
}
.footer .top .btns {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
/*  */
.main .table {
  width: 1300px;
  display: flex;
  justify-content: space-around;
}
.footer {
  position: relative;
}
.bottom {
  position: absolute;
  left: 400px;
  bottom: 35px;
}
.btns .button1 .button3 {
  width: 50px;
}


/* 定义网格布局 */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
  align-items: center;
  justify-items: center;
}

/* 定义表格样式 */
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th,
td {
  text-align: center;
  padding: 8px;
  border: 1px solid #ddd;
}

th {
  background-color: #4caf50;
  color: white;
}

/* 隐藏文件上传控件 */
input[type="file"] {
  position: absolute;
  left: -9999px;
}

/* 自定义上传按钮样式 */
.upload-button {
  display: inline-block;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.upload-button:hover {
  background-color: #3e8e41;
}
</style>
